<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, , maximum-scale=1.0" />
<meta charset="UTF-8">
<title>Activiti工作流设计器</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<!-- Draw2d CSS-->
<link type="text/css" rel="stylesheet" href="css/draw2d.css" />
<link type="text/css" rel="stylesheet" href="css/contextmenu.css" />
<!-- ESTDesigner CSS-->
<link href="js/ESTDesigner/designer.css" type="text/css" rel="stylesheet" />
<!-- JQuery EasyUi CSS-->
<link type="text/css" href="js/easyui/themes/default/easyui.css" rel="stylesheet" title="blue">
<link href="js/easyui/themes/icon.css" type="text/css" rel="stylesheet" />
<!-- JQuery AutoComplete -->
<link rel="stylesheet" type="text/css" href="js/jquery-autocomplete/jquery.autocomplete.css" />
<!--<link rel="stylesheet" type="text/css" href="js/jquery-autocomplete/lib/thickbox.css" />-->

<SCRIPT src="js/draw2D/lib/jquery-1.12.4.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/jquery-migrate-1.2.1.min.js"></SCRIPT>
<!-- JQuery AutoComplete -->
<script type='text/javascript' src='js/jquery-autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='js/jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>
<!--<script type='text/javascript' src='js/jquery-autocomplete/lib/thickbox-compressed.js'></script>-->
<script type='text/javascript' src='js/jquery-autocomplete/jquery.autocomplete.js'></script>
<!-- JQuery EasyUi JS-->
<script src="js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<!-- Draw2d JS-->
<SCRIPT src="js/draw2D/lib/shifty.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/raphael.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/jquery.autoresize.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/jquery-touch_punch.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/jquery.contextmenu.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/rgbcolor.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/StackBlur.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/canvg.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/Class.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/json2.js"></SCRIPT>
<SCRIPT src="js/draw2D/lib/pathfinding-browser.min.js"></SCRIPT>
<SCRIPT src="js/draw2D/draw2d.js"></SCRIPT>
<!-- ESTDesigner JS-->
<SCRIPT src="js/ESTDesigner/core/Config.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/core/Http.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/core/Handler.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Application.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Canvas.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Task.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Event.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Connection.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Gateway.js"></SCRIPT>
<SCRIPT src="js/ESTDesigner/Container.js"></SCRIPT>
<!-- Mock测试数据，生成环境去掉 -->
<SCRIPT src="js/mock/mock.js"></SCRIPT>
<SCRIPT src="js/mock/mock-test.js"></SCRIPT>
<!-- highlight -->
<link rel="stylesheet" href="js/highlight/styles/atelier-dune-light.css">
<script src="js/highlight/highlight.pack.js"></script>

</head>
<script type="text/javascript">
    var processDefinitionId = "";
    var processDefinitionName = "";
    var processDefinitionVariables = "";
    var _process_def_provided_listeners = "";
    var is_open_properties_panel = false;
    var task;
    var line;
    var canvas;
    var container;
    $(window)
            .load(
                    function () {
                        _designer = $('#designer');
                        _properties_panel_obj = _designer.layout('panel',
                                'east');
                        _properties_panel_obj.panel({
                            onOpen : function () {
                                is_open_properties_panel = true;
                            },
                            onClose : function () {
                                is_open_properties_panel = false;
                            }
                        });
                        _process_panel_obj = _designer
                                .layout('panel', 'center');
                        _designer.layout('collapse', 'east');
                        var height = _process_panel_obj.panel('options').height;
                        var width = _process_panel_obj.panel('options').width;
                        canvas = new ESTDesigner.Canvas("paintarea",
                                width + 300, height);
                        var start = new ESTDesigner.event.Start();
                        var end = new ESTDesigner.event.End();
                        canvas.add(start, 200, 50);
                        canvas.add(end, 200, 400);
                        //注册canvas右键菜单处理回调函数
                        canvas.callback = function (id) {
                            if (!is_open_properties_panel)
                                _designer.layout('expand', 'east');
                            _properties_panel_obj.panel('refresh',
                                    'processProperties.html');
                        };
                        //注册connection右键菜单处理回调函数
                        canvas.connectionCallback = function (obj) {
                            if (!is_open_properties_panel)
                                _designer.layout('expand', 'east');

                            line = obj;
                            _properties_panel_obj.panel('refresh',
                                    'flowProperties.html');
                        };
                        //task右键菜单处理函数
                        canvas.taskCallback = function (t, key) {
                            if (!is_open_properties_panel)
                                _designer.layout('expand', 'east');
                            task = t;
                            if (task.type == "ESTDesigner.task.UserTask")
                                _properties_panel_obj.panel('refresh',
                                        'userTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.ManualTask")
                                _properties_panel_obj.panel('refresh',
                                        'manualTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.ServiceTask")
                                _properties_panel_obj.panel('refresh',
                                        'serviceTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.ScriptTask")
                                _properties_panel_obj.panel('refresh',
                                        'scriptTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.ReceiveTask")
                                _properties_panel_obj.panel('refresh',
                                        'receiveTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.MailTask")
                                _properties_panel_obj.panel('refresh',
                                        'mailTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.BusinessRuleTask")
                                _properties_panel_obj.panel('refresh',
                                        'businessRuleTaskProperties.html');
                            else if (task.type == "ESTDesigner.task.CallActivityTask")
                                _properties_panel_obj.panel('refresh',
                                        'callActivityProperties.html');
                        };
                        //container右键菜单处理函数
                        canvas.containerCallback = function (obj) {
                            if (!is_open_properties_panel)
                                _designer.layout('expand', 'east');
                            container = obj;
                            _properties_panel_obj.panel('refresh',
                                    'containerProperties.html');
                        };
                        $('.easyui-linkbutton')
                                .draggable(
                                        {
                                            proxy : function (source) {
                                                var n = $('<div class="draggable-model-proxy"></div>');
                                                n.html($(source).html())
                                                        .appendTo('body');
                                                return n;
                                            },
                                            deltaX : 0,
                                            deltaY : 0,
                                            revert : true,
                                            cursor : 'auto',
                                            onStartDrag : function () {
                                                $(this).draggable('options').cursor = 'not-allowed';
                                            },
                                            onStopDrag : function () {
                                                $(this).draggable('options').cursor = 'auto';
                                            }
                                        });
                        $('#paintarea')
                                .droppable(
                                        {
                                            accept : '.easyui-linkbutton',
                                            onDragEnter : function (e, source) {
                                                $(source).draggable('options').cursor = 'auto';
                                            },
                                            onDragLeave : function (e, source) {
                                                $(source).draggable('options').cursor = 'not-allowed';
                                            },
                                            onDrop : function (e, source) {
                                                var wfModel = $(source).attr(
                                                        'wfModel');
                                                var shape = $(source).attr(
                                                        'iconImg');
                                                var modelType = $(source).attr(
                                                        'modelType');
                                                if (wfModel) {
                                                    var x = $(source)
                                                            .draggable('proxy')
                                                            .offset().left;
                                                    var y = $(source)
                                                            .draggable('proxy')
                                                            .offset().top;
                                                    var xOffset = canvas
                                                            .getAbsoluteX();
                                                    var yOffset = canvas
                                                            .getAbsoluteY();
                                                    var scrollLeft = canvas
                                                            .getScrollLeft();
                                                    var scrollTop = canvas
                                                            .getScrollTop();
                                                    addModel(wfModel, x
                                                            - xOffset
                                                            + scrollLeft, y
                                                            - yOffset
                                                            + scrollTop, shape,
                                                            modelType);
                                                }
                                            }
                                        });
                        function addModel(name, x, y, icon, type) {
                            var model = null;
                            model = eval("new " + name);
                            canvas.add(model, x, y);
                        }

                        //产生xml
                        $('#process-definition-tab').tabs({
                            fit : true,
                            onSelect : function (title) {
                                if (title == 'XML') {
                                    $('#descriptorarea').text(canvas.toXML());
                                    $('#descriptorarea').each(function(i, block) {
                                        hljs.highlightBlock(block);
                                    });
                                }
                            }
                        });
                        $('#saveWfBt').click(function(){
                            var xml = canvas.toXML();
//                             console.log(xml);
							var data = {
							        xml : xml,
                                    name : canvas.process.name,
                                    processVariables : canvas.process.getVariablesJSONObject()  
							};
							Http.post(Config.Url.Save_Wf,data,EventHandler.OnSaveWf.Success,EventHandler.OnSaveWf.Error);
                        });
                        canvas.getCommandStack().addEventListener(function(e){
                            if(e.isPostChangeEvent()){
                                updatePreview(canvas);
                            }
                        });
                        updatePreview(canvas);
                    });
    function redo() {
        canvas.getCommandStack().redo();
    }
    function undo() {
        canvas.getCommandStack().undo();
    }

    function exportProcessDef(obj) {
        $("#exportProcessDialog").dialog('open');
        updatePreview(canvas);
        //obj.href="${ctx}/wf/procdef/procdef!exportProcessDef.action?procdefId="+processDefinitionId+"&processName="+processDefinitionName;
    }
    function openImportDialog(obj) {
        $("#importProcessDialog").dialog('open');
    }
    function importProcDef() {
        canvas.clear();
        var xml = $('#importXml').val();
        var parser = new ESTDesigner.tool.Parser(canvas, xml);
        parser.parse();
        $('#importXml').val('');
        $("#importProcessDialog").dialog('close');
    }
    function closeImportDialog() {
        $('#importXml').val('');
        $("#importProcessDialog").dialog('close');
    }
    function closeExportDialog() {
        $("#exportProcessDialog").dialog('close');
    }
    function updatePreview(canvas){
        var writer = new draw2d.io.png.Writer();
        writer.marshal(canvas,function(png){
           $("#preview").attr("src",png);
        });
    };
</script>
<body id="designer" class="easyui-layout">
	<div region="west" split="true" iconCls="palette-icon" title="Palette" style="width: 150px;">
		<div class="easyui-accordion" fit="true" border="false">
			<div id="event" title="Event" iconCls="palette-menu-icon" class="palette-menu">
				<a href="##" class="easyui-linkbutton" plain="true" iconCls="start-event-icon">Start</a><br> <a href="##" class="easyui-linkbutton"
					plain="true" iconCls="end-event-icon">End</a><br>
			</div>
			<div id="task" title="Task" iconCls="palette-menu-icon" selected="true" class="palette-menu">
				<a href="##" class="easyui-linkbutton" plain="true" iconCls="user-task-icon" wfModel="ESTDesigner.task.UserTask">User Task</a><br> <a
					href="##" class="easyui-linkbutton" plain="true" iconCls="manual-task-icon" wfModel="ESTDesigner.task.ManualTask">Manual Task</a><br> <a
					href="##" class="easyui-linkbutton" plain="true" iconCls="service-task-icon" wfModel="ESTDesigner.task.ServiceTask">Service Task</a><br> <a
					href="##" class="easyui-linkbutton" plain="true" iconCls="script-task-icon" wfModel="ESTDesigner.task.ScriptTask">Script Task</a><br> <a
					href="##" class="easyui-linkbutton" plain="true" iconCls="mail-task-icon" wfModel="ESTDesigner.task.MailTask">Mail Task</a><br> <a href="##"
					class="easyui-linkbutton" plain="true" iconCls="receive-task-icon" wfModel="ESTDesigner.task.ReceiveTask">Receive Task</a><br> <a href="##"
					class="easyui-linkbutton" plain="true" iconCls="business-rule-task-icon" wfModel="ESTDesigner.task.BusinessRuleTask">Business Rule Task</a><br>
				<a href="##" class="easyui-linkbutton" plain="true" iconCls="subprocess-icon" wfModel="ESTDesigner.container.SubProcess" modelType="container">SubProcess</a><br>
				<a href="##" class="easyui-linkbutton" plain="true" iconCls="callactivity-icon" wfModel="ESTDesigner.task.CallActivityTask">CallActivity</a><br>
			</div>
			<div id="gateway" title="Gateway" iconCls="palette-menu-icon" class="palette-menu">
				<a href="##" class="easyui-linkbutton" plain="true" iconCls="parallel-gateway-icon" wfModel="ESTDesigner.gateway.ParallelGateway"
					iconImg="js/designer/icons/type.gateway.parallel.png">ParallelGateway</a><br> <a href="##" class="easyui-linkbutton" plain="true"
					iconCls="exclusive-gateway-icon" wfModel="ESTDesigner.gateway.ExclusiveGateway" iconImg="js/designer/icons/type.gateway.exclusive.png">ExclusiveGateway</a><br>
			</div>
			<div id="boundary-event" title="Boundary event" iconCls="palette-menu-icon" class="palette-menu">
				<a href="##" class="easyui-linkbutton" plain="true" iconCls="timer-boundary-event-icon">TimerBoundaryEvent</a><br> <a href="##"
					class="easyui-linkbutton" plain="true" iconCls="error-boundary-event-icon">ErrorBoundaryEvent</a><br>
			</div>
		</div>
	</div>
	<div id="process-panel" region="center" split="true" iconCls="process-icon" title="工作流设计器" data-options="fit:true">
		<div id="process-definition-tab">
			<div id="designer-area" title="图形" style="POSITION: absolute; width: 100%; height: 100%; padding: 0; border: none; overflow: auto;">
				<div id="paintarea" onselectstart="javascript:/*IE8 hack*/return false"
					style="width: 100%; height: 100%; padding: 0; border: none; overflow: auto;"></div>
			</div>
			<div id="xml-area" title="XML" style="width: 100%; height: 100%; overflow: hidden; overflow-x: hidden; overflow-y: hidden;">
				<pre><code id="descriptorarea"></code></pre>
			</div>
		</div>
	</div>
	<div id="properties-panel" region="east" split="true" iconCls="properties-icon" title="属性" style="width: 300px;"></div>

	<!-- toolbar -->
	<div id="toolbar-panel" region="north" border="false" style="height: 36px; background: #E1F0F2;">
		<div style="background: #E1F0F2; padding: 5px;">
			<a href="javascript:void(0)" id="sb1" class="easyui-splitbutton" menu="#edit-menu" iconCls="icon-edit">编辑</a>
			<!--			<a href="javascript:void(0)" id="sb2" class="easyui-splitbutton" menu="#mm2" iconCls="icon-ok" onclick="javascript:alert(workflow.toXML())">Ok</a>-->
			<!--			<a href="javascript:void(0)" id="mb2" class="easyui-menubutton" menu="#xml/diagram" onclick="viewXMLOrDiagram()">XML/Diagram</a>-->
			<a href="javascript:void(0)" id="mb3" class="easyui-menubutton" menu="#mm3" iconCls="icon-help">帮助</a>
		</div>
		<div id="edit-menu" style="width: 150px;">
			<div iconCls="icon-undo" onclick="undo()">Undo</div>
			<div iconCls="icon-redo" onclick="redo()">Redo</div>
			<div class="menu-sep"></div>
			<!--		<div onclick="openProcessDef()">Open</div>-->
			<div id="saveWfBt" iconCls="icon-save">保存</div>
			<div iconCls="icon-export" onclick="exportProcessDef(this)">导出</div>
			<div iconCls="icon-import" onclick="openImportDialog(this)">导入</div>
		</div>
		<div id="mm3" style="width: 150px;">
			<div>帮助</div>
			<div class="menu-sep"></div>
			<div>关于</div>
		</div>
	</div>
	<!-- task context menu -->
	<div id="task-context-menu" class="easyui-menu" style="width: 120px;">
		<div id="properties-task-context-menu" iconCls="properties-icon">属性</div>
		<div id="delete-task-context-menu" iconCls="icon-remove">删除</div>
	</div>
	<!-- form configuration window -->
	<div id="form-win" title="Form Configuration" style="width: 750px; height: 500px;"></div>
	<!-- listener configuration window -->
	<div id="listener-win" title="Listener Configuration" style="width: 750px; height: 500px;"></div>
	<!-- candidate configuration window -->
	<div id="task-candidate-win" title="Candidate Configuration" style="width: 750px; height: 500px;"></div>
	<!-- 导入流程定义对话框 -->
	<div id="importProcessDialog" class="easyui-dialog" style="width: 1000px; height: 800px"
		data-options="title:'导入流程',toolbar:'#bb',modal:true,closed:true" style="overflow:hidden;">
		<textarea id="importXml" style="width: 100%; height: 99%; padding: 0; border: none;"></textarea>
	</div>
	<!-- 导出流程定义对话框 -->
	<div id="exportProcessDialog" class="easyui-dialog" style="width: 1000px; height: 800px"
		data-options="title:'导出流程',toolbar:'#cc',modal:true,closed:true" style="overflow:hidden;">
		<img id="preview" style="overflow:auto;width:100%;"/>
	</div>
	<div id="bb">
		<a href="#" onclick="importProcDef()" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">导入</a> <a href="#"
			onclick="closeImportDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">关闭</a>
	</div>
	<div id="cc">
		<a href="#" onclick="closeExportDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">关闭</a>
	</div>
</body>
</html>